<template>
  <div id="nav">
<van-nav-bar
  :title="changenavtitle" 
  :right-text="changenavright"
  :left-arrow="backshow"
  @click-left="onClickLeft"
  @click-right="onClickRight"
  v-show="pageshow"
/>
<div  v-show="search">
<topsearch  />
</div>
  </div>

  <!-- <router-view /> -->
  <!-- 缓存路由 
  :key="$route.fullPath"  切换路由不缓存    
  -->
 <router-view v-if="!$route.meta.nokeeplive"  v-slot="{ Component }">
  <keep-alive   :exclude="['newtail','goodsdetail']">
    <component :is="Component"  />
  </keep-alive>
 
</router-view>
 <router-view v-if="$route.meta.nokeeplive" />



  <!-- <keep-alive>
    <router-view />
      </keep-alive> -->
  <van-tabbar v-show="tabbar" v-model="active">

  <van-tabbar-item  icon="like-o" to="/index">乐购</van-tabbar-item>
  <van-tabbar-item  icon="like-o" to="/seeplove">青恋</van-tabbar-item>
   <van-tabbar-item icon="friends-o" to="/friends">好友</van-tabbar-item>
  <van-tabbar-item icon="cart-circle-o" to="/shopcar" :badge="$store.getters.getcartsum" >购物车</van-tabbar-item>
  <van-tabbar-item icon="setting-o" to="/user" >个人中心</van-tabbar-item>

</van-tabbar>
		 	<div style="width:5rempx;  font-size:0.5rem ;  margin:0 auto; padding:20px 0;">
		 		<a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=44030902003128" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"><img src="@/assets/img/beian.png" style="float:left;"/><p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;">粤公网安备 44030902003128号</p></a>
		 	</div>

</template>
<script>
import { useRouter } from 'vue-router';
import { ref } from 'vue';
import topsearch from './components/search.vue'
import shipei from'@/assets/shipei.js'

export default {
  components:{
  topsearch
  },

  setup(props) {
    const router = useRouter();
    const onClickLeft = () => history.back();
    const onClickRight = () =>router.push('/login') ;
    const active = ref(0);
    const navright = ref(1) 
  const tabbar = ref(false)
    const icon = {
      active: 'https://img.yzcdn.cn/vant/user-active.png',
      inactive: 'https://img.yzcdn.cn/vant/user-inactive.png',
    };
    const onSearch= ()=>{
      console.log("点击");
    }
    return {
      onClickLeft,
      onClickRight,
      icon,
      active,
      navright,
      tabbar,
      onSearch
      
    };
  },
  data(){
    return {
      backshow:"",
      pageshow:true,
      trsy:"asdasd",
      navtitle:"",
      search:false
    }
  },
  computed:{
    changenavright(){
      return   this.$store.getters.getnavright
    },
    changenavtitle(){
      return this.navtitle
    }

    
  },
  created:function(){
    // this.navright=this.$store.getters.getnavright
    // this.navright="+"
    console.log(this.navright);
    this.trsy=this.$store.getters.gettrydarta
  }
  ,
  mounted:shipei(),
  watch:{
    $route:{
      handler:function(to,from){
      this.navtitle = to.meta.title
      // console.log(to.meta.title);
      console.log("来自路由",from);
      this.backshow=to.meta.isbackshow
      this.tabbar=to.meta.isbackshow ? false : true
      this.search=to.meta.search
      this.pageshow=to.meta.pageshow ? false :true
      if(from.name='商品详情' && from.params.id){
      this.backshow=from.params.id ?  true: false
      }
  
    },
    //Vue3 默认执行 不需要handler
      // immediate: true // immediate立即执行
    }
  }
}
</script>
<style lang="scss">
#app {
  // font-family: Avenir, Helvetica, Arial, sans-serif;
  // -webkit-font-smoothing: antialiased;
  // -moz-osx-font-smoothing: grayscale;
  // background-color: #f7f8fa;
  // text-align: center;
  color: #2c3e50;
  padding-bottom: 2rem;
  width: 15rem;
  margin: 0 auto;
    .van-tabbar{
    // width: 500px;
  max-width: 750px;
  min-width: 320px;
  left: 50%;
  transform: translateX(-50%);
  }
}

#nav {
  padding-top: 10px;
  max-width: 750px;
  min-width: 320px;
  margin: auto;
  position: sticky;
  background-color: #fff;
  width: 15rem;
  top: 0;
  z-index: 999;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }

}
.fl{
  float: right;
}
</style>
